<template>
  <!-- 商品详情 -->
  <view class="container">
    <!-- 轮播图 -->
    <swiper
      indicator-dots="true"
      autoplay="true"
      :interval="interval"
      previous-margin="20rpx"
      next-margin="20rpx"
      duration="1000"
      indicator-color="#ddd"
      circular="false"
      indicator-active-color="#e02e2e"
    >
      <block v-for="(item, index) in imgListRef" :key="index">
        <swiper-item>
          <image :src="item" />
        </swiper-item>
      </block>
    </swiper>

    <!-- 商品信息 -->
    <view class="goodsInfo">
      <view class="priceStore">
        <view class="priceInfo">
          <text class="price" v-if="defaultSku && defaultSku.price">
            <text class="price-num">￥{{ wxs.parsePrice(defaultSku.price)[0] }}</text>
            <text class="price-num">.{{ wxs.parsePrice(defaultSku.price)[1] }}</text>
          </text>
          <text class="original-price" v-if="defaultSku && defaultSku.oriPrice">￥{{ wxs.parsePrice(defaultSku.oriPrice)[0] }}.{{ wxs.parsePrice(defaultSku.oriPrice)[1] }}</text>
          <text class="sales" />
        </view>
        <!-- <view class="store" @tap="onStore">
          <image class="icon" src="@/static/images/store.png" />
        </view> -->
      </view>
      <view class="titlebar">
        <view class="title">{{ prodName }}</view>
        <button class="share" open-type="share" size="mini">
          <image src="@/static/images/share.png" />
          分享
        </button>
      </view>
      <view class="describe">{{ brief }}</view>
    </view>

    <!-- 已选规格 -->
    <view class="sku" @tap="onShowSku(-1)">
      <view class="sku-tit">已选</view>
      <view class="sku-con">{{ selectedProp.length > 0 ? selectedProp + '，' : '' }}{{ prodNum }}件</view>
      <view class="more">...</view>
    </view>
    <!-- 评价 -->
    <view class="comment" v-if="isCommentRef">
      <view class="titlebar" @tap="onMoreComment">
        <view class="text">
          商品评价
          <text class="cmt-good">({{ commentDataRef.number }})</text>
          <!-- <text class="cmt-good">好评{{ commentDataRef.positiveRating }}%</text> -->
        </view>
        <view class="cmt-count">
          查看更多
          <text class="cmt-more" />
        </view>
      </view>

      <view class="content">
        <!-- <view class="tag" @tap="onMoreComment">
          <text>全部({{ commentDataRef.number }})</text>
          <text>好评({{ commentDataRef.praiseNumber }})</text>
          <text>中评({{ commentDataRef.secondaryNumber }})</text>
          <text>差评({{ commentDataRef.negativeNumber }})</text>
          <text>有图({{ commentDataRef.picNumber }})</text>
        </view> -->
        <view class="items">
          <!-- littleCommPage -->
          <view class="item" v-for="(item, index) in commentList.list" :key="index">
            <view class="user">
              <view class="info">
                <image class="icon" :src="item.pic ? item.pic : '@/static/images/mine_user.png'" />
                <view class="nickname">{{ item.nickName ? item.nickName : '--' }}</view>
              </view>
              <text class="date">{{ item.recTime }}</text>
            </view>
            <view class="cmt-cnt">{{ item.content }}</view>
            <scroll-view class="cmt-attr" v-if="item.pics.length" scroll-x="true">
              <image v-for="(commPic, index2) in item.pics" :key="index2" :src="commPic" />
            </scroll-view>
          </view>
        </view>
        <view class="cmt-more-v" v-if="commentRef.records && commentRef.records.length > 2">
          <text @tap="onMoreComment">查看全部</text>
        </view>
      </view>
    </view>
    <!-- 商品详情 -->
    <view class="productDetail">
      <view class="titlebar">
        <view class="text">商品详情</view>
      </view>
      <view>
        <rich-text :nodes="content" />
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom">
      <!-- <view class="btn icon" @tap="onHome">
        <image src="@/static/images/tabbar/home_foc.png" />
        首页
      </view> -->
      <view class="btn icon" @tap="onCollect">
        <image :src="isCollection ? '/static/images/collect_foc.png' : '/static/images/collect_nor.png'" />
        收藏
      </view>
      <view class="btn icon" @tap="onCart">
        <image src="@/static/images/tabbar/basket_nor.png" />
        购物车
        <view v-if="totalCartNum > 0" class="badge badge-1">{{ totalCartNum }}</view>
      </view>
      <view class="btn cart" @tap="onShowSku(0)">加入购物车</view>
      <view class="btn buy" @tap="onShowSku(1)">立即购买</view>
      <view class="btn" :class="isSelfBargain ? 'selfBargain' : 'bargain'" @tap="onBargain(0)" v-if="bargainMode > 0">{{ isSelfBargain ? '已砍' : '砍价' }}</view>
    </view>
    <!-- end 底部按钮 -->

    <!-- 规格弹窗 -->
    <view class="skuPop" v-if="isShowSkuRef">
      <view class="mask" @click="onClosePopup"></view>
      <view class="skuPopContent">
        <view class="titleBar">
          <image class="pup-sku-img" :src="defaultSku.pic ? defaultSku.pic : pic" />
          <view class="pup-sku-price">
            <text v-if="defaultSku && defaultSku.price" class="pup-sku-price-int">￥{{ wxs.parsePrice(defaultSku.price)[0] }}</text>
            .{{ wxs.parsePrice(defaultSku.price)[1] }}
          </view>

          <view class="pup-sku-prop">
            <text>已选</text>
            {{ selectedProp.length > 0 ? selectedProp + '，' : '' }}{{ prodNum }}件
          </view>
          <view class="close" @tap="onClosePopup" />
        </view>
        <view class="pup-sku-body">
          <view class="pup-sku-area">
            <view v-if="skuList.length" class="sku-box">
              <block v-for="(skuGroupItem, skuGroupItemIndex) in skuGroupList" :key="skuGroupItemIndex">
                <view v-for="(skuLine, key) in skuGroupItem" :key="key" class="items sku-text">
                  <text class="sku-kind">{{ key }}</text>
                  <view class="con">
                    <text
                      v-for="skuLineItem in skuLine"
                      :key="skuLineItem"
                      class="sku-choose-item"
                      :class="[
                        selectedPropList.indexOf(key + ':' + skuLineItem) !== -1 ? 'active' : '',
                        isSkuLineItemNotOptional(allProperties, selectedPropObj, key, skuLineItem, propKeys) ? 'dashed' : ''
                      ]"
                      @click="toChooseItem(skuGroupItemIndex, skuLineItem, key)"
                    >
                      {{ skuLineItem }}
                    </text>
                  </view>
                </view>
              </block>
            </view>
          </view>
          <view class="pup-sku-count">
            <view class="num-wrap">
              <view class="minus" @tap="onCountMinus">
                <text class="row" />
              </view>
              <view class="text-wrap">
                <input type="number" :value="prodNum" :disabled="shareSkuType != 2" />
              </view>
              <view class="plus" @tap="onCountPlus">
                <text class="row" />
                <text class="col" />
              </view>
            </view>
            <view class="count-name">数量</view>
          </view>
        </view>
        <view class="pup-sku-footer">
          <view class="btn cart" v-if="shareSkuType != 2" @tap="onAddBasket">加入购物车</view>
          <view class="btn buy" v-if="shareSkuType != 2" @tap="onBuyNow">立即购买</view>
          <view class="btn" :class="isSelfBargain ? 'selfBargain' : 'bargain'" v-if="bargainMode > 0" @tap="onBargain(1)">{{ isSelfBargain ? '已砍' : '砍价' }}</view>
        </view>
      </view>
    </view>

    <!-- 评价弹窗  :type="sposition" -->
    <uni-popup ref="commentPopup" type="bottom" :maskClick="true">
      <!-- v-if="commentShow" -->
      <view class="comment-popup">
        <view class="titlebar">
          <view class="title">
            商品评价
            <!-- <text class="cmt-good">好评度{{ commentDataRef.positiveRating }}%</text> -->
          </view>
          <text class="closes" @tap="onClosePopup" />
        </view>

        <view class="content">
          <view class="tag">
            <text data-evaluate="-1" :class="evaluate == -1 ? 'selected' : ''" @tap="getCommentList">全部({{ commentDataRef.number }})</text>
            <text data-evaluate="0" :class="evaluate == 0 ? 'selected' : ''" @tap="getCommentList">好评({{ commentDataRef.praiseNumber }})</text>
            <text data-evaluate="1" :class="evaluate == 1 ? 'selected' : ''" @tap="getCommentList">中评({{ commentDataRef.secondaryNumber }})</text>
            <text data-evaluate="2" :class="evaluate == 2 ? 'selected' : ''" @tap="getCommentList">差评({{ commentDataRef.negativeNumber }})</text>
            <text data-evaluate="3" :class="evaluate == 3 ? 'selected' : ''" @tap="getCommentList">有图({{ commentDataRef.picNumber }})</text>
          </view>

          <view class="cmt-items">
            <block v-if="commentRef.records && commentRef.records.length">
              <view v-for="(item, index) in commentRef.records" :key="index" class="cmt-item">
                <view class="cmt-user">
                  <text class="date">{{ item.recTime }}</text>
                  <view class="cmt-user-info">
                    <image class="user-img" :src="item.pic" />
                    <view class="nickname">{{ item.nickName ? item.nickName : '--' }}</view>
                  </view>
                </view>
                <view class="cmt-cnt">{{ item.content }}</view>
                <scroll-view class="cmt-attr" v-if="item.pics.length" scroll-x="true">
                  <image v-for="(commPic, index2) in item.pics" :key="index2" :src="commPic" />
                </scroll-view>
                <view v-if="item.replyContent" class="cmt-reply">
                  <text class="reply-tit">店铺回复：</text>
                  {{ item.replyContent }}
                </view>
              </view>
            </block>

            <view class="empty" v-if="!commentRef.records || !commentRef.records.length">暂无评价</view>
          </view>
          <view v-if="commentRef.pages > commentRef.current" class="load-more">
            <text @tap="getMoreComment">点击加载更多</text>
          </view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="commentPopup2" type="bottom" :maskClick="true">
      <comment :commentData="commentData" :commentList="commentList"></comment>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
const app = getApp();
const wxs = number();
const interval = ref(3000);
const selectedProp = ref([]);
const loginDataRef = ref({});
const isCollection = ref(false);
const commentPopup = ref();
const commentPopup2 = ref();
const commentData = ref({
  name: '传值xx'
});
const totalCartNum = ref(0);

let productId = 0;
let shareUserId = ''; //分享用户ID
let shareSkuId = ''; //分享规格ID

onLoad((options) => {
  console.log('初始参数：', options);
  productId = options.productId; // 加载商品信息
  if (!options.shareUserId) {
  } else {
    shareUserId = options.shareUserId;
    shareSkuId = options.skuId;
  }
  loginDataRef.value = uni.getStorageSync('loginResult');
  console.log('登录数据：', loginDataRef.value);

  getProdInfo(); // 加载商品数据
  getCollection();
  getCommentData(); // 加载评论项
  getDefaultComment(); //
});

//生命周期函数
onShow((options) => {
  totalCartNum.value = app.globalData.totalCartCount;
  if (!!options) {
    console.log('onShow参数：', options);
    loginDataRef.value = uni.getStorageSync('loginResult');
    getProdInfo(); // 加载商品数据
    getCollection();
  }
});

//系统右上角的分享好友 + '&skuId=' + defaultSku.value.skuId
onShareAppMessage(() => {
  let userId = shareUserId ? shareUserId : loginDataRef.value.userId;
  console.log('系统分享:', productId, userId, loginDataRef.value);
  return {
    title: prodName.value,
    path: '/pages/index/productInfo/productInfo?productId=' + productId + '&shareUserId=' + userId + '&skuId=' + defaultSku.value.skuId
  };
});

const onStore = () => {
  // uni.showToast({
  //   title: '店铺信息',
  //   icon: 'none'
  // });
  uni.navigateTo({
    url: '/pages/index/store/store'
  });
};

//获取收藏信息
const getCollection = () => {
  uni.showLoading();
  http
    .request({
      url: '/p/user/collection/isCollection',
      method: 'GET',
      data: {
        prodId: productId
      }
    })
    .then(({ data }) => {
      isCollection.value = data;
      uni.hideLoading();
    });
};

//收藏
const onCollect = () => {
  uni.showLoading();
  http
    .request({
      url: '/p/user/collection/addOrCancel',
      method: 'POST',
      data: productId
    })
    .then(() => {
      isCollection.value = !isCollection.value;
      uni.hideLoading();
    });
};

//首页
const onHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  });
};

//购物车
const onCart = () => {
  if (!isLogin()) return;
  uni.switchTab({
    url: '/pages/basket/basket'
  });
};

const shopId = 1;

//加入购物车
const onAddBasket = () => {
  uni.showLoading({
    mask: true
  });
  http
    .request({
      url: '/p/shopCart/changeItem',
      method: 'POST',
      data: {
        basketId: 0,
        count: prodNum.value,
        prodId: productId,
        shopId,
        skuId: defaultSku.value.skuId
      }
    })
    .then(() => {
      totalCartNum.value = totalCartNum.value + prodNum.value;
      uni.hideLoading();
      uni.showToast({
        title: '已加入购物车',
        icon: 'none'
      });
    });
};

//立即购买
const onBuyNow = () => {
  uni.setStorageSync(
    'orderItem',
    JSON.stringify({
      prodId: productId,
      skuId: defaultSku.value.skuId,
      prodCount: prodNum.value,
      shopId
    })
  );
  uni.navigateTo({
    url: '/pages/index/pay/pay?orderEntry=1'
  });
};

const isLogin = () => {
  let isLogin = loginDataRef.value && loginDataRef.value.userId;
  if (!isLogin) {
    uni.navigateTo({
      url: '/pages/login/login?from=1'
    });
  }
  return isLogin;
};

//助力砍一刀
const onBargain = (index) => {
  console.log('砍一刀：');
  if (!isLogin() || bargainMode.value == 0 || isSelfBargain.value) return;

  if (skuList && skuList.length > 0 && index == 0) {
    onShowSku(2);
    return;
  }
  uni.showLoading({
    mask: true
  });
  http
    .request({
      url: '/p/bargain/reduce',
      method: 'GET',
      data: {
        shareUserId: shareUserId ? shareUserId : loginDataRef.value.userId,
        skuId: shareSkuId ? shareSkuId : defaultSku.value.skuId
      }
    })
    .then(({ data }) => {
      uni.hideLoading();
      uni.showModal({
        title: '',
        content: '成功砍价￥' + data.price,
        confirmColor: '#e02e2e',
        success(res) {
          getProdInfo();
        }
      });
    })
    .finally(() => {
      uni.hideLoading();
    });
};

//减数量
const onCountMinus = () => {
  if (shareSkuType == 2) return;
  if (prodNum.value > 1) {
    prodNum.value = prodNum.value - 1;
  }
};

//加数量
const onCountPlus = () => {
  if (shareSkuType == 2) return;
  if (prodNum.value < 1000) {
    prodNum.value = prodNum.value + 1;
  }
};

const shareSkuType = ref(0);
const isShowSkuRef = ref(false);
const onShowSku = (val) => {
  if (!isLogin()) return;
  shareSkuType.value = val;
  isShowSkuRef.value = true;
};

const commentShow = ref(false);
const onMoreComment = () => {
  // commentShow.value = true;
  commentPopup2.value.open();
};

const onClosePopup = () => {
  isShowSkuRef.value = false;
  // commentShow.value = false;
  commentPopup2.value.close();
};

const skuList = ref([]);
const brief = ref('');
const prodNum = ref(1);
const pic = ref('');
const imgListRef = ref('');
const prodName = ref('');
const price = ref(0);
const content = ref('');
const bargainMode = ref(0);
const isSelfBargain = ref(false);

//商品信息
const getProdInfo = () => {
  uni.showLoading();
  let params = {
    prodId: productId // userType: 0
  };
  if (shareUserId) {
    Object.assign(params, {
      shareUserId: shareUserId
    });
  }
  console.log('参数params：', params);
  http
    .request({
      url: '/prod/prodInfo',
      method: 'GET',
      data: params
    })
    .then(({ data }) => {
      uni.hideLoading();
      if (!data) {
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
        return;
      }
      imgListRef.value = data.imgs?.split(',');
      content.value = util.formatHtml(data.content);
      price.value = data.price;
      prodName.value = data.prodName;
      productId = data.prodId;
      brief.value = data.brief;
      skuList.value = data.skuList;
      isSelfBargain.value = data.skuList[0].isSelfBargain;
      console.log('isSelfBargain值：', isSelfBargain.value);
      bargainMode.value = data.bargainMode;
      pic.value = data.pic;
      // 组装sku
      groupSkuProp(data.skuList, data.price);
      uni.hideLoading();
    });
};

const isCommentRef = ref(false);
const commentDataRef = ref({});
const getCommentData = () => {
  http
    .request({
      url: '/prodComm/prodCommData',
      method: 'GET',
      data: {
        prodId: productId
      }
    })
    .then(({ data }) => {
      commentDataRef.value = data;
    });
};

const commentRef = ref({
  current: 0,
  pages: 0,
  records: []
});
// const littleCommPage = ref([]);
const commentList = reactive({
  list: []
});
const evaluate = ref(-1);

//获取部分评论
const getDefaultComment = () => {
  if (commentRef.value.records.length) {
    return;
  }
  getCommentList();
};

const getMoreComment = () => {
  getCommentList();
};

/**
 * 分页获取评论
 */
const getCommentList = (e) => {
  if (e) {
    if (e.currentTarget.dataset.evaluate === evaluate.value) {
      return;
    }
    commentRef.value = {
      current: 0,
      pages: 0,
      records: []
    };
    evaluate.value = e.currentTarget.dataset.evaluate;
  }

  http
    .request({
      url: '/prodComm/prodCommPageByProd',
      method: 'GET',
      data: {
        prodId: productId,
        size: 10,
        current: commentRef.value.current + 1,
        evaluate: evaluate.value
      }
    })
    .then(({ data }) => {
      let records = commentRef.value.records;
      if (data.records && data.records.length > 0) {
        data.records.forEach((item) => {
          if (item.pics) {
            item.pics = item.pics.split(',');
          }
        });
        records = records.concat(data.records);
      }
      // 如果商品详情中没有评论的数据，截取两条到商品详情页商品详情
      commentRef.value = {
        current: data.current,
        pages: data.pages,
        records
      };

      // if (!littleCommPage.value.length) {
      if (records && records.length > 0) {
        // littleCommPage.value = records.slice(0, 2);
        commentList.list = records.slice(0, 2);
      } else {
        //测试
        const temp2 = [
          {
            recTime: '2024-10-10',
            pic: 'https://img1.baidu.com/it/u=1217699628,319637070&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=721',
            nickName: '张三丰',
            content: '该用户觉得商品很好，给出5星好评',
            pics: ['https://img0.baidu.com/it/u=3878892884,2078439952&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=459'],
            replyContent: '胡扯'
          },
          {
            recTime: '2024-10-11',
            pic: 'https://img1.baidu.com/it/u=1217699628,319637070&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=721',
            nickName: '灭绝师太',
            content: '该用户觉得商品挺好',
            pics: []
          }
        ];
        commentList.list = temp2;
      }
    });
};

let selectedPropObjList = null;
const skuGroup = ref({});
const defaultSku = ref(null);
const selectedPropObj = ref({});
const propKeys = ref([]);
const allProperties = ref([]);
const findSku = ref(true);
const skuGroupList = ref([]);

/**
 * 组装SKU
 */
const groupSkuProp = (skuList, defaultPrice) => {
  if (skuList.length === 1 && !skuList[0].properties) {
    defaultSku.value = skuList[0];
    findSku.value = true;
    return;
  }
  const _skuGroupList = [];
  const skuGroupParam = {};
  const _allProperties = [];
  const _propKeys = [];
  const _selectedPropObj = {};
  const selectedPropObjListParam = [];

  let defaultSkuParam = null;
  for (let i = 0; i < skuList.length; i++) {
    let isDefault = false;
    if (!defaultSkuParam && skuList[i].price == defaultPrice) {
      defaultSkuParam = skuList[i];
      isDefault = true;
    }
    const properties = skuList[i].properties; // 版本:公开版;颜色:金色;内存:64GB
    _allProperties.push(properties);
    const propList = properties.split(';'); // ["版本:公开版","颜色:金色","内存:64GB"]
    for (let j = 0; j < propList.length; j++) {
      const propval = propList[j].split(':'); // ["版本","公开版"]
      let props = skuGroupParam[propval[0]]; // 先取出 版本对应的值数组
      // 如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
      if (isDefault) {
        _propKeys.push(propval[0]);
        _selectedPropObj[propval[0]] = propval[1];
        const selectedPropObjItem = {};
        selectedPropObjItem[propval[0]] = propval[1];
        selectedPropObjListParam.push(selectedPropObjItem);
      }
      if (!props) {
        props = []; // 假设还没有版本，新建个新的空数组
        props.push(propval[1]); // 把 "公开版" 放进空数组
      } else {
        if (props.indexOf(propval[1]) === -1) {
          // 如果数组里面没有"公开版"
          props.push(propval[1]); // 把 "公开版" 放进数组
        }
      }
      skuGroupParam[propval[0]] = props; // 最后把数据 放回版本对应的值
      const propListItem = {};
      propListItem[propval[0]] = props;
      _skuGroupList.push(propListItem);
    }
  }
  defaultSku.value = defaultSkuParam;
  propKeys.value = _propKeys;
  selectedPropObj.value = _selectedPropObj;
  skuGroup.value = skuGroupParam;
  selectedPropObjList = selectedPropObjListParam;
  skuGroupList.value = unique(_skuGroupList);
  allProperties.value = _allProperties;
  parseSelectedObjToVals(skuList);
};

const selectedPropList = ref(null);

/**
 * 将已选的 {key:val,key2:val2}转换成 [val,val2]
 */
const parseSelectedObjToVals = (skuList) => {
  const selectedPropObjListParam = selectedPropObjList;
  let selectedPropertiesParam = '';
  const selectedPropListParam = [];
  const selectedPropShowListParam = [];
  for (let i = 0; i < selectedPropObjListParam.length; i++) {
    const selectedPropObjItem = selectedPropObjListParam[i];
    for (const key in selectedPropObjItem) {
      if (Object.hasOwnProperty.call(selectedPropObjItem, key)) {
        selectedPropListParam.push(key + ':' + selectedPropObjItem[key]);
        selectedPropShowListParam.push(selectedPropObjItem[key]);
        selectedPropertiesParam += key + ':' + selectedPropObjItem[key] + ';';
      }
    }
  }
  selectedPropertiesParam = selectedPropertiesParam.substring(0, selectedPropertiesParam.length - 1);
  selectedPropList.value = selectedPropListParam;
  selectedPropObjList = selectedPropObjListParam;
  let findSkuParam = false;
  for (let i = 0; i < skuList.length; i++) {
    if (skuList[i].properties == selectedPropertiesParam) {
      findSkuParam = true;
      defaultSku.value = skuList[i];
      break;
    }
  }
  findSku.value = findSkuParam;
};

/**
 * 判断当前的规格值 是否可以选
 */
const isSkuLineItemNotOptional = (allProperties, selectedPropObjParam, key, item, propKeys) => {
  const selectedPropObj = Object.assign({}, selectedPropObjParam);
  let properties = '';
  selectedPropObj[key] = item;
  for (let j = 0; j < propKeys.length; j++) {
    properties += propKeys[j] + ':' + selectedPropObj[propKeys[j]] + ';';
  }
  properties = properties.substring(0, properties.length - 1);
  for (let i = 0; i < allProperties.length; i++) {
    if (properties == allProperties[i]) {
      return false;
    }
  }
  for (let i = 0; i < allProperties.length; i++) {
    if (allProperties[i].indexOf(item) >= 0) {
      return true;
    }
  }
  return false;
};

//规格点击事件
const toChooseItem = (skuGroupItemIndex, skuLineItem, key) => {
  selectedPropObjList[skuGroupItemIndex][key] = skuLineItem;
  selectedPropObj.value[key] = skuLineItem;
  parseSelectedObjToVals(skuList.value);
};

//去重
const unique = (arr) => {
  const map = {};
  arr.forEach((item) => {
    const obj = {};
    Object.keys(item)
      .sort()
      .map((key) => (obj[key] = item[key]));
    map[JSON.stringify(obj)] = item;
  });
  return Object.keys(map).map((key) => JSON.parse(key));
};
</script>

<style scoped lang="scss">
@import './productInfo.scss';
</style>
